<template>
  <el-dialog v-model="dialogVisible" :title="title" :width="imgWidth" :before-close="handleClose">
    <div class="img-dialog">
      <img :src="imgSrc" alt="" />
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
let imgSrc = ref("");
let imgWidth = ref("40%");
let title = ref("");
let dialogVisible = ref(false);
function handleClose() {
  dialogVisible.value = false;
}

function initFun(src, width = '40%') {
  title.value = "图片";
  imgSrc.value = src;
  imgWidth.value = width;
  dialogVisible.value = true;
}

defineExpose({
  initFun,
});
</script>
<style scoped lang="scss">
.img-dialog {
  width: 100%;

  img {
    width: 100%;
    height: auto;
  }
}
</style>
